<template>
	<div class="home-container layout-pd">
		<div class="header">
			<div class="title">真实面试经验</div>
			<div class="header-actions">
				<el-input v-model="searchQuery" placeholder="搜索公司/岗位..." class="search-box" clearable />
				<el-button type="primary" @click="showPublishDialog = true">
					<el-icon><Plus /></el-icon>
					发布经验
				</el-button>
			</div>
		</div>

		<div class="interview-list">
			<div v-for="interview in filteredInterviews" :key="interview.id" class="interview-card" @click="toExperience_content">
				<div class="card-header">
					<div class="company-info">
						<h3>{{ interview.company }}</h3>
						<span class="position">{{ interview.position }}</span>
					</div>
					<div class="meta-info">
						<el-tag :type="getDifficultyType(interview.difficulty)" effect="plain"> 难度：{{ interview.difficulty }} </el-tag>
						<span class="likes">
							<el-icon @click="handleLike(interview.id)"><Star /></el-icon>
							{{ interview.likes }}
						</span>
					</div>
				</div>

				<div class="content-section">
					<h4>面试经验</h4>
					<p>{{ interview.experience }}</p>
				</div>

				<div class="recommend-section">
					<h4>推荐学习资料</h4>
					<ul>
						<li v-for="(item, index) in interview.recommendations" :key="index">{{ item }}</li>
					</ul>
				</div>

				<div class="contact-section">
					<h4>联系方式</h4>
					<p>{{ interview.contactInfo }}</p>
				</div>
			</div>
		</div>
		<!-- 发布经验对话框 -->
		<el-dialog v-model="showPublishDialog" title="发布面试经验" width="50%">
			<el-form :model="newInterview" label-width="120px" :rules="rules" ref="publishForm">
				<el-form-item label="公司名称" prop="company">
					<el-input v-model="newInterview.company" placeholder="例如：阿里巴巴" />
				</el-form-item>

				<el-form-item label="应聘岗位" prop="position">
					<el-input v-model="newInterview.position" placeholder="例如：前端开发工程师" />
				</el-form-item>

				<el-form-item label="面试难度" prop="difficulty">
					<el-select v-model="newInterview.difficulty" placeholder="请选择难度">
						<el-option label="简单" value="简单" />
						<el-option label="中等" value="中等" />
						<el-option label="困难" value="困难" />
					</el-select>
				</el-form-item>

				<el-form-item label="面试经验" prop="experience">
					<el-input v-model="newInterview.experience" type="textarea" :rows="5" placeholder="请详细描述你的面试过程、问题和回答思路..." />
				</el-form-item>

				<el-form-item label="推荐资料">
					<el-tag v-for="(item, index) in newInterview.recommendations" :key="index" closable @close="removeRecommendation(index)">
						{{ item }}
					</el-tag>
					<el-input
						v-model="recommendationInput"
						class="input-new-tag"
						size="small"
						placeholder="输入推荐资料"
						@keyup.enter="addRecommendation"
						@blur="addRecommendation"
					/>
				</el-form-item>

				<el-form-item label="联系方式" prop="contactInfo">
					<el-input v-model="newInterview.contactInfo" placeholder="邮箱/微信等联系方式" />
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="showPublishDialog = false">取消</el-button>
				<el-button type="primary" @click="submitInterview">提交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Star, Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import { useRouter } from 'vue-router';

const router = useRouter();
const searchQuery = ref('');
const showPublishDialog = ref(false);
const recommendationInput = ref('');
const publishForm = ref();

// 模拟面试经验数据
const interviews = ref([
	{
		id: 1,
		company: '阿里巴巴',
		position: '前端开发工程师',
		difficulty: '困难',
		experience: '共经历了3轮技术面+1轮HR面，重点考察Vue原理和项目架构能力，需要准备手写虚拟滚动列表等实战题目...',
		recommendations: ['《JavaScript高级程序设计》', 'Vue官方文档', 'LeetCode算法题'],
		contactInfo: '邮箱：zhangsan@example.com',
		likes: 45,
	},
	{
		id: 2,
		company: '腾讯科技',
		position: '后端开发工程师',
		difficulty: '中等',
		experience: 'Go语言和分布式系统相关的问题较多，需要掌握MySQL索引优化和Redis持久化机制...',
		recommendations: ['《Go语言实战》', '《凤凰架构》', '极客时间课程'],
		contactInfo: '微信：tengxun_123',
		likes: 32,
	},
]);

// 计算属性过滤数据
const filteredInterviews = computed(() => {
	return interviews.value.filter((item) => {
		return (
			item.company.toLowerCase().includes(searchQuery.value.toLowerCase()) || item.position.toLowerCase().includes(searchQuery.value.toLowerCase())
		);
	});
});

// 处理点赞
const handleLike = (id: number) => {
	const target = interviews.value.find((item) => item.id === id);
	if (target) target.likes++;
};

// 根据难度返回不同的tag类型
const getDifficultyType = (difficulty: string) => {
	switch (difficulty) {
		case '简单':
			return 'success';
		case '中等':
			return 'warning';
		case '困难':
			return 'danger';
		default:
			return 'info';
	}
};

const toExperience_content = () => {
	router.push('/experience_content');
};
// 新面试经验表单数据
const newInterview = ref({
	company: '',
	position: '',
	difficulty: '',
	experience: '',
	recommendations: [] as string[],
	contactInfo: '',
	likes: 0,
});

// 表单验证规则
const rules = {
	company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
	position: [{ required: true, message: '请输入应聘岗位', trigger: 'blur' }],
	difficulty: [{ required: true, message: '请选择面试难度', trigger: 'change' }],
	experience: [{ required: true, message: '请输入面试经验', trigger: 'blur' }],
	contactInfo: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
};

// 添加推荐资料
const addRecommendation = () => {
	if (recommendationInput.value && !newInterview.value.recommendations.includes(recommendationInput.value)) {
		newInterview.value.recommendations.push(recommendationInput.value);
		recommendationInput.value = '';
	}
};

// 移除推荐资料
const removeRecommendation = (index: number) => {
	newInterview.value.recommendations.splice(index, 1);
};

// 提交新面试经验
const submitInterview = () => {
	publishForm.value.validate((valid: boolean) => {
		if (valid) {
			// 生成新ID并添加到列表
			const newId = interviews.value.length > 0 ? Math.max(...interviews.value.map((i) => i.id)) + 1 : 1;

			interviews.value.unshift({
				id: newId,
				...newInterview.value,
			});

			// 重置表单
			newInterview.value = {
				company: '',
				position: '',
				difficulty: '',
				experience: '',
				recommendations: [],
				contactInfo: '',
				likes: 0,
			};

			showPublishDialog.value = false;
			ElMessage.success('面试经验发布成功！');
		}
	});
};
</script>

<style scoped>
.home-container {
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.title {
	font-size: 24px;
	font-weight: bold;
}

.search-box {
	width: 300px;
}

.interview-list {
	display: grid;
	gap: 20px;
}

.interview-card {
	background: white;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.company-info h3 {
	margin: 0;
	font-size: 20px;
	color: #333;
}

.position {
	color: #666;
	font-size: 14px;
}

.meta-info {
	display: flex;
	align-items: center;
	gap: 15px;
}

.likes {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #666;
	cursor: pointer;
}

.likes .el-icon {
	color: #f56c6c;
}

.content-section,
.recommend-section,
.contact-section {
	margin-bottom: 20px;
}

h4 {
	color: #409eff;
	margin: 10px 0;
}

ul {
	padding-left: 20px;
	color: #666;
}

.contact-section p {
	background: #f5f7fa;
	padding: 10px;
	border-radius: 4px;
	color: #666;
}
.header-actions {
	display: flex;
	gap: 15px;
	align-items: center;
}

.input-new-tag {
	width: 120px;
	margin-left: 10px;
}

.el-tag {
	margin-right: 10px;
	margin-bottom: 5px;
}

.el-textarea {
	:deep(.el-textarea__inner) {
		font-family: inherit;
		line-height: 1.6;
	}
}
</style>
